<template>
  <view class="shop_box">
    <view v-for="(items,index) in ShoplistComponents" v-if="ShoplistComponents.length > 0" :key="index"
          class="shops_list">
      <view class="shop_list_item" :class="items.name+index">
        <view v-if="items.picture" style="position: relative">
          <image  :src="items.picture" :lazy-load="true"
                 @load="imageLoad(items.actionUrl.impMonitorUrl)"></image>
          <image style="position: absolute;top: 0;left: 0;width: 64rpx;height: 32rpx;border-radius: 0" :src="BaseImgUrl()+'/guanfan/home/gf_icon.png'"></image>
        </view>
        <image v-else
               src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
               style="border-radius: 20rpx;"></image>
        <view class="shop_info">
          <view class="shop_mingzi">
            <!--            <view class="shop_type">美团官返</view>-->
            <view :class="items.count == 0?'width':''" class="shop_name">{{ items.name }}</view>
          </view>
          <view class="yysjandejuli_box">
            <view class="yysj_text">配送时长：{{ items.deliveryTimeTip }}</view>
            <view class="shop_juli">距您：{{ items.deliveryDistance || '0km' }}</view>
          </view>
          <!-- <view class="shop_adr">
            <text>地址：{{items.address}}</text>
          </view> -->
        </view>
      </view>
      <view v-for="(aitem, aindex) in items.planActivityInfoList" :key="aindex" class="active_box"
            @click="handleShopDetailActive(items,aitem,aindex)">
        <view class="a_title">
          <text class="activity" style="padding: 6rpx 12rpx">活动{{ aindex + 1 }}</text>
          <text class="no_pay_rul" style="background-color: #FFF1D6;color: #F9661C;border-radius: 0 5rpx 5rpx 0;padding: 6rpx 12rpx">无实付要求</text>
        </view>
        <view class="active_btns">
          <view class="left_box">
            <view :class="aitem.day_num<=aitem.total_count?'hui':''" class="money">
              会员最高返{{ aitem.member_commission.ratio }}%
            </view>
            <view v-if="aitem.planActivityType == 2" :class="aitem.day_num<=aitem.total_count?'hui':''" class="pj_text">
              无需评价
            </view>
          </view>
          <view class="right_box">
            <view class="bl_box">
              <view class="" style="width: 100rpx;">
                <u-line-progress activeColor="#FF8548"
                                 inactiveColor="#FFDECE"
                                 :percentage="aitem.percent"
                                 :height="8"
                                 :showText="false">
                  <view slot="default"></view>
                </u-line-progress>
              </view>
              <text class="val_num">{{ aitem.percent }}%</text>
            </view>
            <view v-if="aitem.inventory == 0" class="btn sq_btn">已售罄</view>
            <view v-else class="btn qd_btn">抢单</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {conUtils} from "../../utils/conUtils";
import {BaseImgUrl, lsHttp} from "../../utils/lshttp";

export default {
  name: "shopListGF",
  props: {
    Shoplist: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      ShoplistComponents: []
    };
  },
  watch: {
    Shoplist(newVal, oldVal) {
      this.ShoplistComponents = newVal
    }
  },
  onLoad() {
    this.ShoplistComponents = this.Shoplist
  },
  methods: {
    BaseImgUrl() {
      return BaseImgUrl
    },
    imageLoad(imUrl) {
      conUtils("曝光", imUrl)
      uni.request({
        //商家详情
        url: imUrl,
        method: 'GET',
      });
    },
    // 点击活动跳转到店铺详情对应显示活动
    handleShopDetailActive(item, aitem, Index) {
      uni.request({
        //商家详情
        url: item.actionUrl.clickMonitorUrl,
        method: 'GET',
      });
      conUtils("clickUrl", clickUrl)
      if (aitem.day_num <= aitem.total_count) {
        uni.showToast({
          title: '已售罄',
          icon: 'none'
        })
        return
      }
      if (aitem.is_work === 0) {
        uni.showToast({
          title: aitem.order_open_time,
          icon: 'none'
        })
        return
      }
      // uni.navigateTo({
      //   url: '/pages/shopdetail/shopdetail_gf?item=' + (JSON.stringify(item)) + '&activeIndex=' + Index,
      // })
      uni.navigateTo({
        url: '/pages/shopdetail/shopdetail_gf?&activeIndex=' + Index,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: function (data) {
            console.log(data)
          },
          someEvent: function (data) {
            console.log(data)
          }
        },
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('item', item)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.shops_list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx 0;
}

.no_pay_rul {
  background-color: #FFF1D6;
  color: #F9661C;
  border-radius: 0 5rpx 5rpx 0;
}

.activity {
  background-color: #F1F1F1;
  border-radius: 5rpx 0 5rpx;
  color: #666666;
}

.shop_list_item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 20rpx;
  display: flex;
  position: relative;

  .shouwanTag {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F97632;
    height: 54rpx;
    font-size: 24rpx;
    width: 110rpx;
    color: #fff;
    line-height: 54rpx;
    text-align: center;
    border-radius: 0 20rpx 0 20rpx;
  }

  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 13rpx;
  }

  .shop_name {
    padding-left: 10rpx;
    word-break: break-all;
    display: -webkit-box;
    // -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: bold;
    flex: 1;
    font-size: 28rpx;

    &.width {
      width: 70%;
      flex: unset;
    }
  }

  .shop_info {
    flex: 1;
    padding-left: 14rpx;

    .shop_mingzi {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .shop_type {
        background-color: #ffdb73;
        color: #333333;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 2rpx 10rpx;
      }

      .elemtag {
        background-color: #17aeff;
        color: #ffffff;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 2rpx 10rpx;
      }

      .shop_juli {
        color: #555555;
        //padding-left: 20rpx;
        font-size: 24rpx;
        text-align: right;
      }
    }

    .yysjandejuli_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      margin: 20rpx 0;

      .yysj_text {
        background-color: #f1f1f1;
        border-radius: 8rpx;
        padding: 4rpx 10rpx;
        font-size: 24rpx;
        text-align: center;
      }

    }

    .shop_yuliang {
      display: flex;
      align-items: center;
      margin-top: -10rpx;

      .jindutiao {
        flex: 1;
        margin-top: -18rpx;
      }

      .shengyu {
        padding-left: 20rpx;
        color: #FF6433;
        font-size: 24rpx;
      }
    }
  }

}

.active_box {
  border-radius: 10rpx;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20rpx;

  .a_title {
    font-size: 24rpx;
    color: #666;
    border-radius: 3px;
    position: relative;
    margin-right: 20rpx;

    text {
      //background-color: #F1F1F1;
      box-sizing: border-box;
      padding: 0 10rpx;
      position: relative;
      z-index: 11;
    }

    &:after {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 2rpx;
      background-color: #EEE;
    }
  }

  .active_btns {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    .left_box {
      display: flex;

      .money {
        background: #FF8548;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 4rpx 10rpx;
        font-size: 22rpx;
        color: #fff;
        font-weight: bold;
        height: 25px;
        line-height: 25px;

        &.hui {
          background: #C8C8C8;
        }
      }


    }

    .right_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        border-radius: 36rpx;
        font-size: 20rpx;
        color: #fff;
        font-weight: bold;
        margin-left: 10rpx;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        &.qd_btn {
          background: linear-gradient(to left, #FF8548, #FE874B);

          &:before {
            content: '';
            display: inline-block;
            width: 20rpx;
            height: 30rpx;
            background: url('https://lsz.lszbg.com/imgs/images/sd_icon.png') no-repeat center center / 100% 100%;
            margin-right: 5rpx;
          }
        }

        &.opacity {
          opacity: .7;
          font-weight: normal;

          &:before {
            display: none;
          }
        }

        &.sq_btn {
          background: linear-gradient(to left, #BFBFBF, #C8C8C8);
        }
      }
    }
  }

  .active_con {
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/old/bg_order.png') no-repeat center center / 100% 100%;
    flex: 1;

    &.hui {
      background: url('https://lsz.lszbg.com/imgs/old/bg_order_hui.png') no-repeat center center / 100% 100%;

      .left_a {
        display: flex;
        align-items: center;

        .j_money {
          font-weight: bold;
          margin-right: 20rpx;

          .icon {
            font-size: 28rpx;
            color: #888;
          }

          .val {
            font-size: 48rpx;
            color: #888;
          }
        }

        .vip_no_yes {
          .yes_vip {
            font-size: 24rpx;
            color: #888;
            font-weight: bold;
          }

          .no_vip {
            font-size: 20rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }
    }

    &.opcity {
      opacity: .7;
    }

    .left_a {
      display: flex;
      align-items: center;

      .j_money {
        font-weight: bold;
        margin-right: 20rpx;

        .icon {
          font-size: 28rpx;
          color: #FE874B;
        }

        .val {
          font-size: 48rpx;
          color: #FE5414;
        }
      }

      .vip_no_yes {
        .yes_vip {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
        }

        .no_vip {
          font-size: 20rpx;
          color: #FE5414;
          margin-top: 5rpx;
        }
      }
    }

    .right_a {
      width: 50%;
      position: relative;

      .r_con {
        position: relative;
        z-index: 111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: -36rpx;

        .lj_qd {
          font-size: 24rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }

      }
    }
  }
}

.bl_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4rpx;

  .val_num {
    font-size: 26rpx;
    color: #FF8548;
    margin-left: 10rpx;
    margin-top: -2px;
    width: 68rpx;
  }

  .time_text {
    color: #FC7532;
    font-size: 26rpx;
  }
}
</style>
